<template>
  <div class="app-container">

    <el-form :model="form" :rules="rules" ref="form"
             v-loading="dataLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             label-width="120px">
      <el-form-item label="讲师名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="form.level" placeholder="请选择">
          <el-option label="高级讲师" :value="1" />
          <el-option label="首席讲师" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师排序" prop="sort">
        <el-input-number v-model="form.sort" controls-position="right" :min="0" :max="10" />
      </el-form-item>

      <!--      <el-form-item label="头像" prop="avatar">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>-->

      <el-form-item label="讲师头像">
        <PanThumb :image="form.avatar"/>
        <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">更换头像</el-button>
        <ImageCropper
          v-show="imageCropperShow"
          :width="300"
          :height="300"
          :key="imageCropperKey"
          :url="BASE_API + '/oss/file/upload'"
          field="file"
          @close="closeUploadBox"
          @crop-upload-success="cropperSuccess" />
      </el-form-item>

      <!--      <el-form-item label="Instant delivery">-->
      <!--        <el-switch v-model="form.delivery" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="Activity type">-->
      <!--        <el-checkbox-group v-model="form.type">-->
      <!--          <el-checkbox label="Online activities" name="type" />-->
      <!--          <el-checkbox label="Promotion activities" name="type" />-->
      <!--          <el-checkbox label="Offline activities" name="type" />-->
      <!--          <el-checkbox label="Simple brand exposure" name="type" />-->
      <!--        </el-checkbox-group>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="Resources">-->
      <!--        <el-radio-group v-model="form.resource">-->
      <!--          <el-radio label="Sponsor" />-->
      <!--          <el-radio label="Venue" />-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

      <el-form-item label="讲师资历" prop="career">
        <el-input v-model="form.career" />
      </el-form-item>
      <el-form-item label="讲师简介" prop="intro">
        <el-input v-model="form.intro" type="textarea" :rows="8" />
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" :disabled="saveBtnDisabled" type="info" >重置</el-button>
        <el-button v-if="edit" @click="update" :disabled="saveBtnDisabled" type="warning" >修改</el-button>
        <el-button v-if="!edit" @click="save" :disabled="saveBtnDisabled" type="primary" >添加</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ts from '@/api/edu/teacher'
import oss from '@/api/edu/oss'
import ImageCropper from "@/components/ImageCropper"
import PanThumb from "@/components/PanThumb"

export default {
  components: { PanThumb, ImageCropper },
  data() {
    return {
      edit: false,
      dataLoading: true,

      form: {
        id: null,
        name: '',
        level: 1,
        sort: 0,
        career: '',
        avatar: '头像',
        intro: '',

        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message:'请输入讲师名称', trigger: 'blur' },
          { min: 3, max: 19, message: '长度在 3 到 19 个字符', trigger: 'blur' }
        ],
        level: [
          { required: true, message:'请选择讲师级别', trigger: 'change' },
        ],
        sort: [
          { required: true, message:'请选择讲师排序', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' }
        ],
        career: [
          { required: true, message:'请输入讲师资历', trigger: 'blur' }
        ]
      },

      // 上传组件参数
      imageCropperShow: false,
      imageCropperKey: 0,
      BASE_API: process.env.VUE_APP_BASE_API,

      saveBtnDisabled: false
    }
  },
  created() {
    this.init()
  },
  watch: {
    // 新版 vat 会重新渲染组件, 不需要监听路由
    // $route(to, from) {
    //   alert("route")
    // }
  },
  methods: {
    init() {
      // alert("created")
      if (this.$route.params && this.$route.params.id) {
        // 修改模式
        this.edit = true
        this.form = {}
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        // 添加模式
        this.dataLoading = false
        this.form = {}
        this.edit = false
      }
    },

    saveOrUpdate() {
      // this.$message('submit!')
      this.save()
    },
    save() {
      ts.add(this.form).then(response => {
        this.$message({
          message: '添加成功!',
          type: "success"
        })
        // 路由跳转
        // this.$router.push("/teacher/list")
        this.$router.push({
          path: '/teacher/list'
        })
      })
    },
    update() {
      ts.update(this.form)
      this.$message({
        message: '修改成功!',
        type: "success"
      })
      // 路由跳转
      // this.$router.push("/teacher/list")
      this.$router.push({
        path: '/teacher/list'
      })
    },
    getInfo(id) {
      this.dataLoading = true
      ts.getById(id)
        .then(response => {
          this.form = response.data.result
          this.dataLoading = false
        })
    },

    onReset() {
      this.$refs["form"].resetFields()
    },
    onCancel() {
      // this.$message({
      //   message: 'cancel!',
      //   type: 'warning'
      // })
      this.$router.back()
    },

    closeUploadBox() {
      this.imageCropperShow = false
      this.imageCropperKey += 1
    },
    cropperSuccess(data) {
      this.form.avatar = data.url
      this.imageCropperShow = false
      this.imageCropperKey += 1
    },
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
